// 引入路径path模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
	// optimization: {
	// 	minimize: false, // 关闭代码压缩，可选
	// },

	// 指定入口文件
	entry: './src/index.ts',

	// devtool: 'inline-source-map',

	devServer: {
		contentBase: './dist',
	},

	// 指定打包文件所在目录
	output: {
		path: path.resolve(__dirname, 'dist'),
		// 打包后的文件名称
		filename: 'bundle.js',
		environment: {
			arrowFunction: false, // 关闭webpack的箭头函数，可选
			const: false,
		},
	},

	// 用来设置引用模块
	resolve: {
		extensions: ['.ts', '.js'],
	},

	mode: 'development',

	// 指定webpack打包时使用模板
	module: {
		// 指定要加载的规则
		rules: [
			{
				// test指定规则生效文件
				test: /\.ts$/,
				// 要使用的loader
				use: [
					// 配置babel
					{
						// 指定加载器
						loader: 'babel-loader',
						// 设置babel
						options: {
							presets: [
								[
									// 指定环境的插件
									'@babel/preset-env',
									// 配置信息
									{
										// 要兼容的目标浏览器
										targets: {
											chrome: '58',
											ie: '11',
										},
										// 指定corejs的版本
										corejs: '3',
										// 使用corejs的方式  'usage'
										useBuiltIns: 'usage',
									},
								],
							],
						},
					},
					'ts-loader',
				],
				exclude: /node_modules/,
			},
			// 设置less文件的处理
			{
				test: /\.less$/,
				use: [
					'style-loader',
					'css-loader',

					// 引入postcss
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [
									[
										'postcss-preset-env',
										{
											browsers: 'last 2 versions',
										},
									],
								],
							},
						},
					},
					'less-loader',
				],
			},
		],
	},

	plugins: [
		new HtmlWebpackPlugin({
			// title: 'TS测试',
			template: './src/index.html',
		}),
		new CleanWebpackPlugin(),
	],
};
